<template>
	<div class="w-full" ref="elFef">
		<!-- <base-list-horizontal sliderId="recommented_slider" :loading="loading" :list="currentList">
			<template #title>
				<card-title img="zd-super" iconColor="var(--color-warning)" textT="slotsrecommends.title" />
			</template>
			<template #default="{ item }">
				<item-card :type="type" :width="itemWidth" :item="item" />
			</template>
		</base-list-horizontal> -->
		<up-scroll-list
			:title-t="titleT"
			:key="type"
			:icon="titleIcon"
			:icon-color="iconColor"
			:total="list.length"
			:seeAll="seeAll"
			@seeAll="handleSeeAll"
			:multiple="isPC() ? 2 : 3">
			<item-card
				v-for="(item, index) in list"
				class="app-hover-offset cursor-pointer"
				:key="index"
				:type="type"
				:width="itemWidth"
				:item="item" />
		</up-scroll-list>
	</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, computed, watch } from 'vue'
// import { useRouter } from 'vue-router'
// import CardTitle from '../common/card-title.vue'
// import { BaseListHorizontal } from '@/components/base'
import { UpScrollList } from '@/components/up'
import ItemCard from '../common/item-card.vue'
// import { recommendsReq } from '@/api/slots'
import { getHomeGameRecommendList, getCasinoGameBySlug } from '@/api/other.ts'
import { casinoRecommendsReq } from '@/api/casino'
import { casinoGameTypeReq } from '@/api/casino'
import { useListCols } from '@/hooks'
import { useElementSize } from '@vueuse/core'
import { useSlotStore, useAppStore } from '@/store'
import { isPC } from '@/utils'

// const router = useRouter()
const elFef = ref(null)
const loading = ref(false)
const { cols } = useListCols(elFef)
const { width } = useElementSize(elFef)
const list: any = ref([])
const slotStore = useSlotStore()
// const casinoStore = useCasinoStore()
const appStore = useAppStore()

const emit = defineEmits(['handleSeeAll'])

const props = defineProps({
	type: {
		type: String,
		default: 'slots'
	},
	seeAll: {
		type: Boolean,
		default: false
	},
	titleT: {
		type: String,
		default: 'slotsrecommends.title'
	},
	titleIcon: {
		type: String,
		default: 'zd-super'
	},
	iconColor: {
		type: String,
		default: 'var(--color-warning)'
	}
})

// const currentList = computed(() => {
// 	if (props.type === 'casino') {
// 		return casinoStore.recommendsList
// 	}
// 	return slotStore.recommendsList
// })

const itemWidth = computed(() => {
	if (width.value && cols.value) {
		return (width.value - (cols.value * 2 - 1) * 10) / cols.value / 2
	}
	return 200
})
// const list: any = ref([])
const getList = async () => {
	loading.value = true
	if (props.type === 'slots') {
		list.value = slotStore.recommendsList
		let { data } = await getHomeGameRecommendList({ page: 1, pageSize: 12 })
		slotStore.setRecommendsList(data.items)
		list.value = data.items
	}
	if (props.type === '2up') {
		let { data } = await getCasinoGameBySlug({ page: 1, pageSize: 24, tagSlug: '2up-originals' })
		list.value = data?.[0].games || []
		console.log('游戏列表', list.value)
	}
	if (props.type === 'gameshow') {
		const { data } = await casinoGameTypeReq({
			page: 1,
			pageSize: 24,
			ids: [],
			gameType: 'game_shows'
		})
		list.value = data.list
			.map((item: any) => {
				return {
					...item,
					gameIcon: item.icon
				}
			})
			.sort((a: any, b: any) => a.sort - b.sort)
	}
	if (props.type === 'casino') {
		// casinoStore.setRecommendsList([])
		const { data } = await casinoRecommendsReq({
			page: 1,
			pageSize: 100
		})
		list.value = data.list
			.map((item: any) => {
				return {
					...item,
					gameIcon: item.icon
				}
			})
			.sort((a: any, b: any) => a.sort - b.sort)
		// casinoStore.setRecommendsList(
		// 	data.list
		// 		.map((item: any) => {
		// 			return {
		// 				...item,
		// 				gameIcon: item.icon
		// 			}
		// 		})
		// 		.sort((a: any, b: any) => a.sort - b.sort)
		// )
	}
	loading.value = false
}

// const updateItem = (val: any) => {
// 	if (props.type === 'casino') {
// 		casinoStore.updateItemStatus(val)
// 	} else {
// 		slotStore.updateItemStatus(val)
// 	}
// 	// list.value.find((item: any) => item.id === val.id).collectState = val.isCollect
// }

const handleSeeAll = () => {
	// if (props.type === 'casino') {
	// 	router.push({
	// 		path: '/casino'
	// 	})
	// } else {
	// 	router.push({
	// 		path: '/slots'
	// 	})
	// }
	emit('handleSeeAll')
}

watch(
	() => appStore.region,
	() => {
		getList()
	}
)

onMounted(() => {
	getList()
})
</script>
